﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<header class="header-area inner-page">
    <th:block th:include="commons/front::public-resource">LOGIN</th:block>
    <th:block th:include="commons/front::login-bar">login-bar</th:block>
    <th:block th:include="commons/front::navigation">navigation</th:block>
    <link th:href="@{/public/front/css/page.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/public/front/js/jquery.z-pager.js}"></script>
    <title>作品库</title>
</header>
<header url="/front/discover"></header>
<style>
    .single-team h3 {
        color: #262626;
        font-size: 24px;
        margin: 28px 0 10px;
    }

    .widget ul li label {
        width: 100%;
        font-size: 14px;
        color: #000;
        font-weight: normal;
    }

    .widget ul li label span.cat-count {
        float: right;
    }

</style>
<body style="height: 100%;">

<ol class="breadcrumb">
    <li title="返回上一页"><a href="javascript:history.go(-1);">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a></li>
</ol>
<!-- Team Section -->
<section class="team-section teacher-page">
    <input type="hidden" th:value="${statisData.id}" id="suitId">
    <input type="hidden" th:value="${customer.id}" id="customerId">
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-lg-9 col-xs-12">
                <div class="single-team row">
                    <div class="row text-center" style="padding-left: 1px; margin-bottom: 25px; font-size: 24px; font-weight: 400;">
                        <div style="display: inline-block;" th:title="${statisData.source}" class="text-center center-align"
                             th:text="${statisData.source}"></div>
                        <div id="audit-status-container" style="display: none; color: red;" th:text="${statisData.statusCn}"></div>
                    </div>
                    <div style="border: solid 2px #ECEEF0;">
                        <img alt="" th:src="${statisData.img_url}">
                    </div>
                    <div class="row" th:if="not ${#lists.isEmpty(materialIds)}" style="margin-top: 5px; padding-left: 10px">
                        <div style="font-weight: bolder; font-size: 15px; padding-left: 6px; line-height: 23px;">使用的素材</div>
                        <a th:each="m,s:${materialIds}" th:href="${m.linkUrl}" target="_blank"
                           style="margin-left: 5px; border: solid 2px #ECEEF0;">
                            <img th:src="${m.imgUrl}" style="width: 60px; height: 60px;">
                        </a>
                    </div>
                    <div class="row">
                        <div style="font-weight: bolder; font-size: 15px; padding-left: 15px; line-height: 23px;">描述</div>
                        <div class="col-sm-8">
                            <pre style="background-color: #ffffff; border: none; line-height: 20px; white-space: pre-wrap !important; word-wrap: break-word !important;   width: 100%;" th:text="${statisData.descrption}"></pre>
                        </div>
                        <div class="col-sm-4 text-right" style="margin-top: 30px; cursor: pointer;">
                            <span id="collect-btn" disabled="true"
                                  class="glyphicon glyphicon-star" style="color: #808080; cursor: default; font-size: x-large;"
                                  title="点击收藏">收藏</span>
                        </div>
                    </div>
                    <div id="audit-container" class="row" style="margin-top: 10px; padding-left: 13px; font-size: 18px; font-weight: 400; color: #7d7d7d; display: none;">
                        <div style="display: inline-block;">审核说明:</div>
                        <div style="display: inline-block; color: red;" th:text="${#maps.containsKey(statisData,'audit_description')}?${statisData.audit_description}"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-lg-3 col-xs-12">
                <aside class="widget">
                    <h4 class="widget-title">作品信息</h4>
                    <ul>
                        <li><label><span class="cat-name">浏览数</span><span class="cat-count"
                                                                               th:text="${statisData.scanCount}"></span></label>
                        </li>
                        <li><label><span class="cat-name">折扣价</span><span class="cat-count"
                                                                               th:text="${statisData.price}"></span></label>
                        </li>
                        <li><label><span class="cat-name">收藏数</span><span class="cat-count"
                                                                               th:text="${statisData.collectCount}"></span></label>
                        </li>
                        <li><label><span class="cat-name">评论数</span><span class="cat-count"
                                                                               id="totalSuitCommentCount">0</span></label>
                        </li>
                        <li><label><span class="cat-name">发布时间</span><span class="cat-count" th:text="${#dates.format(statisData.create_time,'yyyy-MM-dd')}">0</span></label>
                        </li>
                    </ul>
                </aside>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12 col-xs-12 text-left" style="padding-left: 0px">
                <div class="comment-section">
                    <p>
                    <div class="row">
                        <div class="col-sm-8">
                            <h3 id="commentCount">评论（<label id="suitCommentCount">0</label>）</h3>
                        </div>
                        <div class="col-sm-3">
                            <a href="javascript:;" onclick="addComment()">我要评论</a>
                        </div>
                    </div>
                    </p>

                    <ol>
                        <li id="comments-container">
                        </li>
                    </ol>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12 col-xs-12 text-center">
                <h2 class="title">更多作品</h2>
            </div>
        </div>
        <hr/>

        <div class="row" id="more-suits-container">
        </div>
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="page text-center">
                    <div id="pager" class="pager clearfix page"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">评论</h4>
            </div>
            <div class="modal-body" style="padding-top: 20px">
                <div class="container-fluid">
                    <form class="form-horizontal" role="form" id="comment-form" method="post" action=""><br></br>
                        <div class="form-group">
                            <label for="c" class="col-sm-2 control-label">内容</label>
                            <div class="col-sm-8">
                                <input type="hidden" name="replyCustomerId" id="replyCustomerId">
                                <textarea id="c" name="c" required
                                          class="form-control col-sm-3 col-lg-3"
                                          rows="8" cols="80"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="text-center col-sm-10">
                                <button type="button" class="btn btn-default" id="add-comment-btn">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<template id="comment-template">
    {%each(i,d) data %}
    <div class="author-details pull-left">
        <div class="row">
            <div class="col-sm-11">
                <div class="row">
                    <div class="col-sm-1" style="width: 30px;">
                        ${d.rowNum}
                    </div>
                    <div class="col-sm-1">
                        <a href="javascript:;">
                            <img src="${d.headImg}" style="width: 55px; height: 55px;">
                        </a>
                    </div>
                    <div class="col-sm-10">
                        <div class="row">
                            <div class="col-sm-7" style="padding: 0px;">
                                {%if d.customerId == currentCustomerId%}
                                ${d.alias}
                                {{else}}
                                <a href="javascript:;" name="customer-alias" customerId="${d.customerId}">${d.alias}</a>
                                {%/if%}
                            </div>
                            <div class="col-sm-4 text-right">
                                <span>${d.createTime}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div>
                                {%if d.followNum != 1%}
                                回复<a href="javascript:;"
                                     onclick="location.href = ctx + '/front/user_info/${d.replyCustomerId}/1'">${d.replyAlias}：</a>
                                {%/if%}
                            </div>

                            <pre id="preview-desc" style="background-color: #ffffff; border: none; line-height: 20px; white-space: pre-wrap !important; word-wrap: break-word !important;   width: 100%;">${d.content}</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {%/each%}
</template>

<!-- 更多作品 -->
<template id="more-suit-template">
    {%each(i,s) list %}
    <div class="col-sm-3 suit-container">
        <div class="single-team text-center">
            <div class="class-img" onclick="userInfoDetail(${s.customerId},${s.id})" style="cursor:pointer;">
                <img alt="" src="${s.imgUrl}" onerror="loadError(this)" style="background-size: 100% auto; height: 180px; object-fit: cover">
                <div class="class-hover">
                    <a class="popup"
                       href="javascript:;" onclick="userInfoDetail(${s.customerId},${s.id})"><span
                            class="glyphicon glyphicon-link"></span></a>
                </div>
            </div>
            <h3 style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;width: 100%;">${s.source}</h3>
            <p>
                ${subDescription(s.descrption)}
            </p>
        </div>
    </div>
    {%/each%}
</template>

<!-- /.team-section -->

<th:block th:include="commons/front::footer">FOOTER</th:block>
<th:block th:include="commons/front::login">LOGIN</th:block>
<script>
    $(function () {
        if (isLogin()) {

            var customerId = $("#customerId").val();
            if (customerId == getUserInfo().id) {
                $("#audit-container").show();
                $("#audit-status-container").css("display", "inline-block");
            }

            isCollectedSuit();
        }

        init(2);
        getComments();

        $("#comment-form").validate();
        $("#collect-btn").click(function (e) {
            if ($(this).attr("disabled")) {
                return false;
            }
            if (!isLogin()) {
                Alert("您尚未登录");
            } else {
                var type = $(this).attr("type");
                // 收藏
                if (type == 1) {
                    init(1);
                }
                // 取消收藏
                else {
                    cancleCollect();
                }
            }
        });

        $(document).on("click", "a[name='customer-alias']", function (e) {
            if (!isLogin()) {
                Alert("您尚未登录");
                return false;
            }
            var $this = $(e.target);
            $("#content").val("");
            $("#replyCustomerId").val($this.attr("customerId"));
            $('#myModal').modal("show");
        });

        $("#add-comment-btn").click(function () {
            if (!isLogin()) {
                Alert("您尚未登录");
                return false;
            }

            var actionForm = $("#comment-form");
            var valid = actionForm.valid();
            if (valid) {
                actionForm.ajaxSubmit({
                    url: ctx + "/front/api/suit/insertSuitComment",
                    method: "post",
                    data: {
                        customerId: getUserInfo().id,
                        suitId: $("#suitId").val(),
                        content: $("#c").val().replace(/"\n"/g, "<br>")
                    },
                    success: function (rtn) {
                        if (rtn.code != 1) {
                            Alert("操作失败");
                            return;
                        }
                        getComments();
                        $('#myModal').modal("hide");
                    }
                })
            }
        });

        {
            var pageSize = 8;
            $(document).on("click", "div.pager a", function () {
                var $this = $(this);
                var disabledAttr = $this.attr("disabled");
                if (disabledAttr != "undefined" && disabledAttr == "disabled") {
                    return false;
                }

                var targetPage = $this.attr("page-id");
                var cs = $("div.pager span.current");
                var curPage = cs.attr("page-id");
                if (targetPage == curPage) {
                    return;
                }

                loadPage(parseInt(targetPage));
            });

            var loadPage = function (page) {
                var customerId = $("#customerId").val();
                $.get(ctx + "/front/getSuitsPage", {
                    pageNo: page,
                    pageSize: pageSize,
                    status: 1,
                    customerId: customerId
                }, function (rtn) {
                    if (rtn && rtn.code != 1) {
                        Alert("获取数据失败");
                        return;
                    }

                    $("#more-suits-container").empty();
                    $("#more-suit-template").tmpl({list: rtn.data.list}).appendTo('#more-suits-container');

                    var totalPage = Math.ceil(rtn.data.total / pageSize); // 总页数
                    $("#pager").empty().zPager(
                        {
                            totalData: rtn.data.total, // 总记录数
                            pageData: pageSize, // 每页展示记录数
                            pageCount: totalPage, // 总页码
                            current: page // 当前页码
                        }
                    );
                    if ($("#more-suits-container div.col-sm-3").length % 4 == 1) {
                        $("div.suit-container:last").css("clear", "both");
                    }
                });
            };

            loadPage(1);
        }
    });

    function isCollectedSuit() {
        var customerId = $("#customerId").val();
        var loginCustomerId = getUserInfo().id;
        if (customerId == loginCustomerId) {
            return false;
        }
        $.get(ctx + "/front/isCollectedSuit", {suitId: $("#suitId").val(), customerId: loginCustomerId}, function (rtn) {
            if (rtn.data > 0) {
                $("#collect-btn").text("取消收藏").removeAttr("disabled").attr({"title": "取消收藏", type : 2}).css({"color": "#808080", "cursor": "pointer"});
                return false;
            }
            $("#collect-btn").text("收藏").removeAttr("disabled").attr({"title": "收藏", type : 1}).css({"color": "#aa1111", "cursor": "pointer"});
        });
    };

    function init(type) {
        let customerId = isLogin() ? getUserInfo().id : null;
        $.post(ctx + "/front/api/suit/updateSuit", {
            suitId: $("#suitId").val(),
            type: type,
            customerId: customerId
        }, function (rtn) {
            if (type == 1) {
                isCollectedSuit();
            }
        })
    }

    /**
     * 取消收藏
     */
    function cancleCollect() {
        Confirm("确认取消收藏？", function () {
            $.post(ctx + "/front/removeCollect", {suitId: $("#suitId").val(), customerId: getUserInfo().id}, function (rtn) {
                $("#collect-btn").text("收藏").removeAttr("disabled").attr({"title": "收藏", type : 1}).css({"color": "#aa1111", "cursor": "pointer"});
            });
        });
    }

    function getComments() {
        $.get(ctx + "/front/api/suit/selectCommentsBySuitId", {suitId: $("#suitId").val()}, function (rtn) {
            console.info(rtn);
            if (rtn.code != 1) {
                Alert("获取数据失败");
                return;
            }
            if (isLogin()) {
                var currentCustomerId = getUserInfo().id;
                rtn["currentCustomerId"] = currentCustomerId;
            }
            $("#comments-container").empty();
            $("#comment-template").tmpl({
                currentCustomerId: currentCustomerId,
                data: rtn.data.list
            }).appendTo('#comments-container');
            $("#suitCommentCount,#totalSuitCommentCount").text(rtn.data.count);
        })
    }

    function addComment() {
        if (!isLogin()) {
            Alert("您尚未登录");
            return false;
        }
        $("#content").val("");
        $("#replyCustomerId").val("");
        $('#myModal').modal("show");
    }

    function userInfoDetail(customerId, id) {
        location.href=ctx+'/front/user_info_detail/'+customerId+'/'+id+'?t=' + (new Date().getTime());
    }

    function subDescription(d) {
        return d.length > 28 ? d.substring(0, 20) + "..." : d;
    }
</script>

</body>
</html>